<template>
  <div>今年的年龄:<input
    v-model="age"
    placeholder="请输入年龄"
    placeholder-class="input-placeholder"
  /></div>
  <div>两年后的年龄:{{nextAge}}</div>
  <div>五年后的年龄:<input
    v-model="afterAge"
    placeholder-class="input-placeholder"
  /></div>
  <div>{{ selfAge(2025,age,'20k')}}</div>
  <div>{{ selfAge(2027,nextAge,'25k')}}</div>
  <div>{{ selfAge(2030,afterAge,'30k')}}</div>
  <button @click="addAge">点我加一</button>
  <button @click="miusAge">点我减一</button>
</template>

<script setup>
import {ref,computed} from 'vue'
const age = ref(24)
const nextAge =computed(()=> +age.value+2)
const afterAge =computed({
  get(){
    return +age.value+5
  },
  set(val){
    age.value=val-5
  }
})
const addAge=()=>age.value++
const miusAge=()=>age.value--
const selfAge =computed(()=>{
  return function(a,b,c){
    return  a +'年我'+b+'岁,希望月薪'+c
  }
})

</script>